<script setup lang="ts">
  import { ShopStatusEnum, ShopStatusOptions } from '@/shared'
  import { removeAuthHeader } from '@/utils/auth'
  import { Message } from '@arco-design/web-vue'
  import { useRouter } from 'vue-router'

  const status = defineModel<ShopStatusEnum>({
    required: true,
    default: ShopStatusEnum.Disable
  })

  const router = useRouter()

  const handleSelect = (val: string | number | Record<string, any> | undefined) => {
    if (val === 'logout') {
      removeAuthHeader()
      Message.success('退出登录成功')
      router.push('/')
    } else if (val === 'change-password') {
      // TODO
      router.push('/change-password')
    }
  }
</script>

<template>
  <div class="header-right">
    <a-popover title="更改营业状态" trigger="click">
      <a-button type="primary">营业状态</a-button>
      <template #content>
        <a-radio-group v-model="status">
          <a-radio v-for="item in ShopStatusOptions" :key="item.value" :value="item.value">
            <template #radio="{ checked }">
              <a-space
                align="start"
                class="custom-radio-card"
                :class="{ 'custom-radio-card-checked': checked }"
              >
                <div className="custom-radio-card-mask">
                  <div className="custom-radio-card-mask-dot" />
                </div>
                <div>
                  <div className="custom-radio-card-title">
                    {{ item.label }}
                    <span v-if="item.value === ShopStatusEnum.Enable">（默认）</span>
                  </div>
                  <a-typography-text type="secondary">{{ item.desc }}</a-typography-text>
                </div>
              </a-space>
            </template>
          </a-radio>
        </a-radio-group>
      </template>
    </a-popover>
    <a-dropdown @select="handleSelect">
      <a-avatar class="!bg-[#3370ff]">
        <icon-user />
      </a-avatar>
      <template #content>
        <a-doption value="change-password">修改密码</a-doption>
        <a-doption value="logout">退出登录</a-doption>
      </template>
    </a-dropdown>
  </div>
</template>

<style lang="less" scoped>
  .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .custom-radio-card {
    padding: 10px 16px;
    border: 1px solid var(--color-border-2);
    border-radius: 4px;
    width: 250px;
    box-sizing: border-box;
  }

  .custom-radio-card-mask {
    height: 14px;
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
  }

  .custom-radio-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 100%;
  }

  .custom-radio-card-title {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
  }

  .custom-radio-card:hover,
  .custom-radio-card-checked,
  .custom-radio-card:hover .custom-radio-card-mask,
  .custom-radio-card-checked .custom-radio-card-mask {
    border-color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked {
    background-color: var(--color-primary-light-1);
  }

  .custom-radio-card:hover .custom-radio-card-title,
  .custom-radio-card-checked .custom-radio-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked .custom-radio-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }
</style>
